<template>
  <el-dialog
    width="710px"
    :visible="show"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div slot="title" class="title_close">
      <!-- 收费方案 -->
      <div class="title">
        {{ $t("account_dialog.charging_dialog.56htmuih2580") }}
      </div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="hide" />
    </div>
    <div class="comment_list">
      <div class="comment_bar">
        <div
          class="comment_item"
          @click="checkNav(index)"
          v-for="(item, index) in list"
          :key="index"
          :class="navKey === index ? 'bt-blue' : 'bt-gray'"
        >
          <img
            class="comment_icon"
            :src="navKey === index ? item.img1 : item.img2"
            alt=""
          />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 港股交易 -->
    <div v-show="navKey === 0" v-if="chargeList.HK">
      <ul class="fee_type">
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih5540")
          }}</span>
          <span class="li_value"
            >{{ `${(chargeList.HK.commission * 100).toFixed(3)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.HK._commission != ''"
              >({{ $t("m.lowest") }} {{ chargeList.HK._commission
              }} {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._commission && !chargeList.HK.commission_">)</i>
            <i v-if="chargeList.HK._commission && chargeList.HK.commission_">,</i>
            <i v-if="!chargeList.HK._commission && chargeList.HK.commission_">(</i>
            <i v-if="chargeList.HK.commission_ != ''"
              >{{ $t("m.highest") }} {{ chargeList.HK.commission_
              }} {{ $t("m.hkMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih6kk0")
          }}</span>
          <!-- 0.8港币/订单 -->
          <span class="li_value"
            >{{
              `${chargeList.HK.platformFee}${$t("m.hkMoney")}/${$t("m.Order")}`
            }}
            <i v-if="chargeList.HK._platformFee"
              >({{ $t("m.lowest") }} {{ chargeList.HK._platformFee
              }} {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._platformFee && !chargeList.HK.platformFee_">)</i>
            <i v-if="chargeList.HK._platformFee && chargeList.HK.platformFee_">,</i>
            <i v-if="!chargeList.HK._platformFee && chargeList.HK.platformFee_">(</i>
            <i v-if="chargeList.HK.platformFee_"
              >{{ $t("m.highest") }} {{ chargeList.HK.platformFee_
              }} {{ $t("m.hkMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih7080")
          }}</span>
          <!-- 年利率 7.087% -->
          <span class="li_value"
            >{{
              `${$t("m.yearFee")}: ${(chargeList.HK.lombardRate * 100).toFixed(
                2
              )}%`
            }}
            <i v-if="chargeList.HK._lombardRate"
              >({{ $t("m.lowest") }} {{ chargeList.HK._lombardRate
              }} {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._lombardRate && !chargeList.HK.lombardRate_">)</i>
            <i v-if="chargeList.HK._lombardRate && chargeList.HK.lombardRate_">,</i>
            <i v-if="!chargeList.HK._lombardRate && chargeList.HK.lombardRate_">(</i>
            <i v-if="chargeList.HK.lombardRate_"
              >{{ $t("m.highest") }} {{ chargeList.HK.lombardRate_
              }} {{ $t("m.hkMoney") }})</i
            >
          </span>
        </li>
        <!-- <li class="li_item">
          <span class="li_label">{{ `日内融利率【平台收取】` }}</span>
          <span class="li_value">{{
            `${$t("m.yearFee")}: ${(chargeList.HK.dayLombardRate * 100).toFixed(
              4
            )}%, ${$t("m.lowest")}${chargeList.HK._dayLombardRate}${$t(
              "m.hkMoney"
            )}, ${$t("m.highest")}${chargeList.HK.dayLombardRate_}${$t(
              "m.hkMoney"
            )}`
          }}</span>
        </li> -->
      </ul>
      <div class="fee">
        {{ $t("account_dialog.charging_dialog.56htmuih7q80") }}
      </div>
      <ul class="fee_info">
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih8kw0")
          }}</span>
          <span class="li_value"
            >{{ `${(chargeList.HK.tradeFee * 100).toFixed(3)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.HK._tradeFee"
              >({{ $t("m.lowest") }} {{ chargeList.HK._tradeFee }}
               {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._tradeFee && !chargeList.HK.tradeFee_">)</i>
            <i v-if="chargeList.HK._tradeFee && chargeList.HK.tradeFee_">,</i>
            <i v-if="!chargeList.HK._tradeFee && chargeList.HK.tradeFee_">(</i>
            <i v-if="chargeList.HK.tradeFee_"
              >{{ $t("m.highest") }} {{ chargeList.HK.tradeFee_ }}
               {{ $t("m.hkMoney") }})</i
            >
          </span>
        </li>
        <!-- 交易系统使用费 -->
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih9a00")
          }}</span>
          <span class="li_value">{{
            `${chargeList.HK.tradeFeeExtra}${$t("m.hkMoney")}/${$t("m.Order")}`
          }}</span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih9og0")
          }}</span>
          <span class="li_value"
            >{{ `${(chargeList.HK.settlement * 100).toFixed(3)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.HK._settlement"
              >({{ $t("m.lowest") }} {{ chargeList.HK._settlement }}
               {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._settlement && !chargeList.HK.settlement_">)</i>
            <i v-if="chargeList.HK._settlement && chargeList.HK.settlement_">,</i>
            <i v-if="!chargeList.HK._settlement && chargeList.HK.settlement_">(</i>
            <i v-if="chargeList.HK.settlement_"
              >{{ $t("m.highest") }} {{ chargeList.HK.settlement_ }}
               {{ $t("m.hkMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihafs0")
          }}</span>
          <span class="li_value"
            >{{ `${(chargeList.HK.tradeLevy * 100).toFixed(4)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.HK._tradeLevy"
              >({{ $t("m.lowest") }} {{ chargeList.HK._tradeLevy }}
               {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._tradeLevy && !chargeList.HK.tradeLevy_">)</i>
            <i v-if="chargeList.HK._tradeLevy && chargeList.HK.tradeLevy_">,</i>
            <i v-if="!chargeList.HK._tradeLevy && chargeList.HK.tradeLevy_">(</i>
            <i v-if="chargeList.HK.tradeLevy_"
              >{{ $t("m.highest") }} {{ chargeList.HK.tradeLevy_ }}
               {{ $t("m.hkMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihauw0")
          }}</span>
          <span class="li_value"
            >{{ `${(chargeList.HK.stampDuty * 100).toFixed(1)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.HK._stampDuty"
              >({{ $t("m.lowest") }} {{ chargeList.HK._stampDuty
              }} {{ $t("m.hkMoney") }}</i
            >
            <i v-if="chargeList.HK._stampDuty && !chargeList.HK.stampDuty_">)</i>
            <i v-if="chargeList.HK._stampDuty && chargeList.HK.stampDuty_">,</i>
            <i v-if="!chargeList.HK._stampDuty && chargeList.HK.stampDuty_">(</i>
            <i v-if="chargeList.HK.stampDuty_"
              >{{ $t("m.highest") }} {{ chargeList.HK.stampDuty_
              }} {{ $t("m.hkMoney") }},</i
            >
            <i>{{ $t("account_dialog.charging_dialog.56htmqwh5s40") }})</i>
          </span>
        </li>
      </ul>
    </div>
    <!-- 美股交易 -->
    <div v-show="navKey === 1" v-if="chargeList.US">
      <ul class="fee_type">
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih5540")
          }}</span>
          <span class="li_value">
            {{ `${chargeList.US.commission}${$t("m.usMoney")}/`
            }}{{ $t("account_dialog.charging_dialog.56htmhsg8eo0") }}
            <i v-if="chargeList.US._commission"
              >({{ $t("m.lowest") }} {{ chargeList.US._commission
              }} {{ $t("m.usMoney") }}/{{ $t("m.Order") }}</i
            >
            <i v-if="chargeList.US._commission && !chargeList.US.commission_">)</i>
            <i v-if="chargeList.US._commission && chargeList.US.commission_">,</i>
            <i v-if="!chargeList.US._commission && chargeList.US.commission_">(</i>
            <i v-if="chargeList.US.commission_"
              >{{ $t("m.highest") }} {{ chargeList.US.commission_
              }} {{ $t("m.usMoney") }}/{{ $t("m.Order") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih6kk0")
          }}</span>
          <span class="li_value"
            >{{ `${chargeList.US.platformFee}${$t("m.usMoney")}/`
            }}{{ $t("account_dialog.charging_dialog.56htmhsg8eo0") }}
            <i v-if="chargeList.US._platformFee"
              >({{ $t("m.lowest") }} {{ chargeList.US._platformFee
              }} {{ $t("m.usMoney") }}/{{ $t("m.Order") }}</i
            >
            <i v-if="chargeList.US._platformFee && !chargeList.US.platformFee_">)</i>
            <i v-if="chargeList.US._platformFee && chargeList.US.platformFee_">,</i>
            <i v-if="!chargeList.US._platformFee && chargeList.US.platformFee_">(</i>
            <i v-if="chargeList.US.platformFee_"
              >{{ $t("m.highest") }} {{ chargeList.US.platformFee_
              }} {{ $t("m.usMoney") }}/{{ $t("m.Order") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih7080")
          }}</span>
          <span class="li_value"
            >{{
              `${$t("m.yearFee")}: ${(chargeList.US.lombardRate * 100).toFixed(
                2
              )}%`
            }}
            <i v-if="chargeList.US._lombardRate"
              >({{ $t("m.lowest") }} {{ chargeList.US._lombardRate
              }} {{ $t("m.usMoney") }}</i
            >
            <i v-if="chargeList.US._lombardRate && !chargeList.US.lombardRate_">)</i>
            <i v-if="chargeList.US._lombardRate && chargeList.US.lombardRate_">,</i>
            <i v-if="!chargeList.US._lombardRate && chargeList.US.lombardRate_">(</i>
            <i v-if="chargeList.US.lombardRate_"
              >{{ $t("m.highest") }} {{ chargeList.US.lombardRate_
              }} {{ $t("m.usMoney") }})</i
            >
          </span>
        </li>
        <!-- <li class="li_item">
          <span class="li_label">{{ `日内融利率【平台收取】` }}</span>
          <span class="li_value">{{
            `${$t("m.yearFee")}: ${(chargeList.US.dayLombardRate * 100).toFixed(
              4
            )}%`
          }}</span>
        </li> -->
      </ul>
      <div class="fee">
        {{ $t("account_dialog.charging_dialog.56htmuih7q80") }}
      </div>
      <ul class="fee_info">
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihbcg0")
          }}</span>
          <span class="li_value">
            {{ `$${chargeList.US.paymentFee} x `
            }}{{ $t("account_dialog.charging_dialog.56htmhg5qeo0") }}
            <i v-if="chargeList.US._paymentFee"
              >({{ $t("m.lowest") }} {{ chargeList.US._paymentFee
              }} {{ $t("m.usMoney") }}/{{
                $t("account_dialog.charging_dialog.56ht5mws8eo0")
              }}</i
            >
            <i v-if="chargeList.US._paymentFee && !chargeList.US.paymentFee_">)</i>
            <i v-if="chargeList.US._paymentFee && chargeList.US.paymentFee_">,</i>
            <i v-if="!chargeList.US._paymentFee && chargeList.US.paymentFee_">(</i>
            <i v-if="chargeList.US.paymentFee_"
              >{{ $t("m.highest") }} {{ chargeList.US.paymentFee_
              }} {{ $t("m.usMoney") }}/{{
                $t("account_dialog.charging_dialog.56ht5mws8eo0")
              }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihbyo0")
          }}</span>
          <span class="li_value">
            {{ `${Number(chargeList.US.SFCFee * 100).toFixed(6)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.US._SFCFee"
              >({{ $t("m.lowest") }} {{ chargeList.US._SFCFee
              }} {{ $t("m.usMoney") }}</i
            >
            <i v-if="chargeList.US._SFCFee && !chargeList.US.SFCFee_">)</i>
            <i v-if="chargeList.US._SFCFee && chargeList.US.SFCFee_">,</i>
            <i v-if="!chargeList.US._SFCFee && chargeList.US.SFCFee_">(</i>
            <i v-if="chargeList.US.SFCFee_"
              >{{ $t("m.highest") }} {{ chargeList.US.SFCFee_
              }} {{ $t("m.usMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihcxk0")
          }}</span>
          <span class="li_value">
            {{ `$${chargeList.US.tradeActivityFee} x ${$t("account_dialog.charging_dialog.56htmuiWE1k0")}`
            }}
            <i v-if="chargeList.US._tradeActivityFee"
              >({{ $t("m.lowest") }} {{ chargeList.US._tradeActivityFee
              }} {{ $t("m.usMoney") }}</i
            >
            <i v-if="chargeList.US._tradeActivityFee && !chargeList.US.tradeActivityFee_">)</i>
            <i v-if="chargeList.US._tradeActivityFee && chargeList.US.tradeActivityFee_">,</i>
            <i v-if="!chargeList.US._tradeActivityFee && chargeList.US.tradeActivityFee_">(</i>
            <i v-if="chargeList.US.tradeActivityFee_"
              >{{ $t("m.highest") }} {{ chargeList.US.tradeActivityFee_
              }} {{ $t("m.usMoney") }})</i
            >
          </span>
        </li>
      </ul>
    </div>
    <!-- 沪深交易 -->
    <div v-show="navKey === 2" v-if="chargeList.CN">
      <ul class="fee_type">
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih5540")
          }}</span>
          <span class="li_value">
            {{ `${(chargeList.CN.commission * 100).toFixed(3)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.CN._commission"
              >({{ $t("m.lowest") }} {{ chargeList.CN._commission }}
              {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._commission && !chargeList.CN.commission_">)</i>
            <i v-if="chargeList.CN._commission && chargeList.CN.commission_">,</i>
            <i v-if="!chargeList.CN._commission && chargeList.CN.commission_">(</i>
            <i v-if="chargeList.CN.commission_"
              >{{ $t("m.highest") }} {{ chargeList.CN.commission_ }}
              {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih6kk0")
          }}</span>
          <span class="li_value"
            >{{
              `${chargeList.CN.platformFee} ${$t("m.cnMoney")}/${$t("m.Order")}`
            }}
            <i v-if="chargeList.CN._platformFee"
              >({{ $t("m.lowest") }} {{ chargeList.CN._platformFee }}
              {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._platformFee && !chargeList.CN.platformFee_">)</i>
            <i v-if="chargeList.CN._platformFee && chargeList.CN.platformFee_">,</i>
            <i v-if="!chargeList.CN._platformFee && chargeList.CN.platformFee_">(</i>
            <i v-if="chargeList.CN.platformFee_"
              >{{ $t("m.highest") }} {{ chargeList.CN.platformFee_ }}
              {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuih7080")
          }}</span>
          <span class="li_value"
            >{{
              `${$t("m.yearFee")}: ${(chargeList.CN.lombardRate * 100).toFixed(
                2
              )}%`
            }}
            <i v-if="chargeList.CN._lombardRate"
              >({{ $t("m.lowest") }} {{ chargeList.CN._lombardRate }}
               {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._lombardRate && !chargeList.CN.lombardRate_">)</i>
            <i v-if="chargeList.CN._lombardRate && chargeList.CN.lombardRate_">,</i>
            <i v-if="!chargeList.CN._lombardRate && chargeList.CN.lombardRate_">(</i>
            <i v-if="chargeList.CN.lombardRate_"
              >{{ $t("m.highest") }} {{ chargeList.CN.lombardRate_ }}
               {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
      </ul>
      <div class="fee">
        {{ $t("account_dialog.charging_dialog.56htmuih7q80") }}
      </div>
      <ul class="fee_info">
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihdjo0")
          }}</span>
          <span class="li_value">
            {{ `${(chargeList.CN.handlingFee * 100).toFixed(5)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.CN._handlingFee"
              >({{ $t("m.lowest") }} {{ chargeList.CN._handlingFee
              }} {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._handlingFee && !chargeList.CN.handlingFee_">)</i>
            <i v-if="chargeList.CN._handlingFee && chargeList.CN.handlingFee_">,</i>
            <i v-if="!chargeList.CN._handlingFee && chargeList.CN.handlingFee_">(</i>
            <i v-if="chargeList.CN.handlingFee_"
              >{{ $t("m.highest") }} {{ chargeList.CN.handlingFee_
              }} {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihe340")
          }}</span>
          <span class="li_value"
            >{{ `${(chargeList.CN.certificationFee * 100).toFixed(3)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.CN._certificationFee"
              >({{ $t("m.lowest") }} {{ chargeList.CN._certificationFee
              }} {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._certificationFee && !chargeList.CN.certificationFee_">)</i>
            <i v-if="chargeList.CN._certificationFee && chargeList.CN.certificationFee_">,</i>
            <i v-if="!chargeList.CN._certificationFee && chargeList.CN.certificationFee_">(</i>
            <i v-if="chargeList.CN.certificationFee_"
              >{{ $t("m.highest") }} {{ chargeList.CN.certificationFee_
              }} {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <!-- 过户费【中国结算所 -->
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihecs0")
          }}</span>
          <span class="li_value">
            {{ `${(chargeList.CN.transferFee * 100).toFixed(1)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.CN._transferFee"
              >({{ $t("m.lowest") }} {{ chargeList.CN._transferFee
              }} {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._transferFee && !chargeList.CN.transferFee_">)</i>
            <i v-if="chargeList.CN._transferFee && chargeList.CN.transferFee_">,</i>
            <i v-if="!chargeList.CN._transferFee && chargeList.CN.transferFee_">(</i>
            <i v-if="chargeList.CN.transferFee_"
              >{{ $t("m.highest") }} {{ chargeList.CN.transferFee_
              }} {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <!-- 登记过户费【香港结算所 -->
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihelk0")
          }}</span>
          <span class="li_value">
            {{ `${(chargeList.CN.registerTransferFee * 100).toFixed(3)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.CN._registerTransferFee"
              >({{ $t("m.lowest") }} {{ chargeList.CN._registerTransferFee
              }} {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._registerTransferFee && !chargeList.CN.registerTransferFee_">)</i>
            <i v-if="chargeList.CN._registerTransferFee && chargeList.CN.registerTransferFee_">,</i>
            <i v-if="!chargeList.CN._registerTransferFee && chargeList.CN.registerTransferFee_">(</i>
            <i v-if="chargeList.CN.registerTransferFee_"
              >{{ $t("m.highest") }} {{ chargeList.CN.registerTransferFee_
              }} {{ $t("m.cnMoney") }})</i
            >
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihetk0")
          }}</span>
          <span class="li_value">
            {{ `${(chargeList.CN.stampDuty * 100).toFixed(1)}% x `
            }}{{ $t("account_dialog.charging_dialog.56htmuih5s40") }}
            <i v-if="chargeList.CN._stampDuty"
              >({{ $t("m.lowest") }} {{ chargeList.CN._stampDuty
              }} {{ $t("m.cnMoney") }}</i
            >
            <i v-if="chargeList.CN._stampDuty && !chargeList.CN.stampDuty_">)</i>
            <i v-if="chargeList.CN._stampDuty && chargeList.CN.stampDuty_">,</i>
            <i v-if="!chargeList.CN._stampDuty && chargeList.CN.stampDuty_">(</i>
            <i v-if="chargeList.CN.stampDuty_"
              >{{ $t("m.highest") }} {{ chargeList.CN.stampDuty_
              }} {{ $t("m.cnMoney") }},</i
            >
            <i>{{ $t("account_dialog.charging_dialog.56htmqwcss40") }})</i>
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihfbk0")
          }}</span>
          <span class="li_value">
            {{
              `${(chargeList.CN.portfoliosFee * 100).toFixed(4)}% x ${$t(
                "account_dialog.charging_dialog.56htmuihfyc0"
              )} / 365 (${$t("account_dialog.charging_dialog.568ESEws8eo0")}`
            }}
            <i v-if="chargeList.CN._portfoliosFee">,{{$t("m.lowest") }} {{ chargeList.CN._portfoliosFee
              }} {{ $t("m.cnMoney") }}</i>
            <i v-if="chargeList.CN._portfoliosFee && !chargeList.CN.portfoliosFee_">)</i>
            <i v-if="chargeList.CN._portfoliosFee && chargeList.CN.portfoliosFee_">,</i>
            <i v-if="!chargeList.CN._portfoliosFee && chargeList.CN.portfoliosFee_">(</i>
            <i v-if="chargeList.CN.portfoliosFee_">{{$t("m.highest") }} {{ chargeList.CN.portfoliosFee_
              }} {{ $t("m.cnMoney") }})</i>
          </span>
        </li>
        <li class="li_item">
          <span class="li_label">{{
            $t("account_dialog.charging_dialog.56htmuihg700")
          }}</span>
          <span class="li_value">
            <i v-if="chargeList.CN.dividendTaxMonth">{{
              `${$t("account_dialog.charging_dialog.56h2WRws8eo0")},${(
                chargeList.CN.dividendTaxMonth * 100
              ).toFixed(0)}%,`
            }}</i>
            <i v-if="chargeList.CN.dividendTaxYear">{{
              `${$t("account_dialog.charging_dialog.56h2mEws5Co0")},${(
                chargeList.CN.dividendTaxYear * 100
              ).toFixed(0)}%,`
            }}</i>
            {{ `${$t("account_dialog.charging_dialog.568NmEws8eo0")}.` }}
          </span>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
import {get_common_scheme} from '@/assets/js/API/system.js'
import dayjs from "dayjs";
export default {
  props: {
    show: Boolean,
  },
  data() {
    return {
      list: [
        {
          name: this.$t("account_dialog.charging_dialog.56htmuihgeo0"),
          img1: require("@/assets/img/icon_ggjyb.png"),
          img2: require("@/assets/img/icon_ggjyh.png"),
        },
        {
          name: this.$t("account_dialog.charging_dialog.56htmuihgl80"),
          img1: require("@/assets/img/icon_mgl.png"),
          img2: require("@/assets/img/icon_mgjyh.png"),
        },
        {
          name: this.$t("account_dialog.charging_dialog.56htmu14gl80"),
          img1: require("@/assets/img/icon_agtjyb.png"),
          img2: require("@/assets/img/icon_agtjyh.png"),
        },
      ],
      navKey: 0, // 导航切换
      chargeList: {},
    };
  },
  methods: {
    hide() {
      this.initCharge();
      this.$emit("close", "chargingShow");
    },
    // 点击切换nav
    checkNav(index) {
      this.navKey = index;
    },
    initCharge() {
      // 1: A股通, 2：港股，3：美股
      if (this.accountType == 1) this.navKey = 2;
      else if (this.accountType == 2) this.navKey = 0;
      else this.navKey = 1;
      console.log("this", this.accountType);
    },
    // 获取收费方案
    async getCharge() {
      const res = await get_common_scheme();
      if (res.code != 1) return this.$message.error(res.msg);
      this.chargeList = res.data;
      console.log(this.chargeList, "asg");
    },
  },
  computed: {
    accountType() {
      return this.$store.state.index.accountType;
    },
  },
  watch: {
    accountType(val) {
      this.initCharge();
    },
  },
};
</script>

<style lang="less">
@import "~@/assets/less/common.less";
.fee_type {
  padding-bottom: 25px;
  border-bottom: 1px solid @LightBorderLine;
}
.fee {
  color: @fff;
  font-size: 14px;
  padding: 20px 0 10px 0;
}
.li_item {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  .li_label {
    color: @fbSix;
    text-align: left;
  }
  .li_value {
    color: @fff;
    text-align: right;
    max-width: 460px;
    i {
      font-style: initial;
    }
  }
}
</style>